<!-- pages/my/index.vue -->
<script setup lang="ts">
import { getUserInfoApi } from '@/apis/user';
import { useUserStore } from '@/store/user';
import  type { UserData } from '@/types/user';
import { onActivated, ref } from 'vue';

const store = useUserStore()

// 1. 获取用户信息
const userInfo = ref<UserData>({} as UserData)
const getUserInfo = async () => {
    const res = await getUserInfoApi()
    userInfo.value = res
}
getUserInfo()

// 2. 退出登录
const logout = () => {
    uni.showModal({
        title: '温馨提示',
        content: '您确定要退出问诊吗？',
        showCancel: true,
        success: ({ confirm, cancel }) => {
            if (confirm) {
                store.token = ''
                uni.switchTab({
                    url:'/pages/index/index',
                })
            }
        }
    })
}

onActivated(() => {
    getUserInfo()
})
</script>

<template>
    <scroll-view scroll-y>
        <view class="my-page">
            <!-- 用户资料（头像&昵称） -->
            <view class="user-profile">
                <image class="user-avatar" :src="userInfo.avatar"></image>
                <view class="user-info">
                    <text class="nickname">{{ userInfo.account }}</text>
                    <text class="iconfont icon-edit"></text>
                </view>
            </view>
            <!-- 用户数据 -->
            <view class="user-data">
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.collectionNumber }}</text>
                    <text class="data-label">收藏</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.likeNumber }}</text>
                    <text class="data-label">关注</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.score }}</text>
                    <text class="data-label">积分</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.couponNumber }}</text>
                    <text class="data-label">优惠券</text>
                </navigator>
            </view>
            <!-- 问诊医生 -->
            <custom-section v-if="userInfo.consultationInfo?.length" :custom-style="{ paddingBottom: '20rpx' }"
                title="问诊中">
                <swiper class="uni-swiper" indicator-active-color="#2CB5A5" indicator-color="#EAF8F6" indicator-dots>
                    <swiper-item v-for="item in userInfo.consultationInfo" :key="item.id">
                        <view class="doctor-brief">
                            <image class="doctor-avatar" :src="item.avatar" />
                            <view class="doctor-info">
                                <view class="meta">
                                    <text class="name">{{ item.name }}</text>
                                    <text class="title">{{ item.depName }} | {{ item.positionalTitles }}</text>
                                </view>
                                <view class="meta">
                                    <text class="tag">{{ item.gradeName }}</text>
                                    <text class="hospital">{{ item.hospitalName }}</text>
                                </view>
                            </view>
                            <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
                        </view>
                    </swiper-item>
                </swiper>
            </custom-section>
            <!-- 药品订单 -->
            <custom-section show-arrow title="药品订单">
                <!--  具名插槽 -->
                <template #right>
                    <navigator hover-class="none" url=" "> 全部订单 </navigator>
                </template>
                <view class="drug-order">
                    <navigator hover-class="none" url=" ">
                        <uni-badge
                            :text="userInfo?.orderInfo?.finishedNumber ? userInfo?.orderInfo?.finishedNumber + '' : ''"
                            :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-1.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">已完成</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge :text="userInfo?.orderInfo?.paidNumber ? userInfo?.orderInfo?.paidNumber + '' : ''"
                            :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-2.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待付款</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge
                            :text="userInfo?.orderInfo?.receivedNumber ? userInfo?.orderInfo?.receivedNumber + '' : ''"
                            :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-3.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待发货</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge
                            :text="userInfo?.orderInfo?.shippedNumber ? userInfo?.orderInfo?.shippedNumber + '' : ''"
                            :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-4.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待收货</text>
                    </navigator>
                </view>
            </custom-section>
            <!-- 快捷工具 -->
            <custom-section title="快捷工具">
                <uni-list :border="false">
                    <uni-list-item :border="false" title="我的问诊" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-01',
                    }" />
                    <uni-list-item :border="false" title="我的处方" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-02',
                    }" />
                    <uni-list-item to="/subpkg_archive/list/index" :border="false" title="家庭档案" show-arrow
                        show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-03',
                    }" />
                    <uni-list-item :border="false" title="地址管理" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-04',
                    }" />
                    <uni-list-item :border="false" title="我的评价" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-05',
                    }" />
                    <uni-list-item :border="false" title="官方客服" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-06',
                    }" />
                    <uni-list-item :border="false" title="设置" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-07',
                    }" />
                </uni-list>
            </custom-section>
            <!-- 退出登录 -->
            <view class="logout-button" @click="logout">退出登录</view>
        </view>
    </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
